<template>
  <div class="page-container">
    <div ref="con" class="container-chart">
      <!-- 第一个页面 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      seriesData: [],
      chart: "",
    };
  },
  mounted() {
    //页面一加载就调用接口
    this.getData();
    // this.initEchart();
    //设置监听事件
    window.addEventListener("resize", () => {
      this.screen();
    });
  },
  methods: {
    //封装一个屏幕控制大小的函数
    screen() {
      //改变数据图形的大小
      this.chart.resize();
      //可视宽度
      let width = this.$refs.con.offsetWidth;
      //设置字体的大小号
      //这个公式是我们自己测试出来
      //字体
      let num = (width / 100) * 3;
      //设置内圆半径
      //通过公式看  内圆半径有点
      let innerRadius = num * 2;
      //外圆半径的公式
      let outterRadius = innerRadius * 1.3;
      //重新去创建一个配置项
      let option = {
        title: {
          textStyle: {
            fontSize: num,
          },
        },
        //重新去规划数据列 因为是循环遍历，所以我们自定定义一个数组
        series: [1, 2, 3, 4].map((item) => {
          return {
            type: "pie",
            //内外圆的半径
            radius: [innerRadius, outterRadius],
            label: {
              //当前内圆半径的字体号乘以一个0.7 缩小字体
              fontSize: num * 0.7,
            },
          };
        }),
      };
      //重新设置一下配置项
      this.chart.setOption(option);
    },
    getData() {
      this.$axios.get("/cropAreasProportion").then((res) => {
        //整体数据
        //取出图例数组
        console.log(res, "占比");
        this.seriesData = res.data.map((item, index) => {
          let i = (index + 1) * 20 + "%";
          //设置一个数组去规定一下圆心的坐标点
          // let centerlist= ['12.5%,50%','37.5%,50%','62.5%,50%','85.5%,50%']
          let centerlist = [
            {
              info:["12.5%","60%"]
            },
            {
              info:["37.5%","60%"]
            },
            {
              info:["62.5%","60%"]
            },
            {
              info:["85.5%","60%"]
            }
          ]
          // console.log(centerlist[0].info);
          return {
            type: "pie",
            //center 是我们圆心的起点。。。  center如果是一个值就是x,y  还可以用百分比
            // center:100,
            center: centerlist[index].info,
            // center: [i, "50%"],
            // radius 圆的大小。主要值得的是半径  也可以利用数组的形式进行设置 内圆半径、外圆半径
            // radius:50
            radius: [80, 100],
            data: [
              {
                name: `${item.areas}\n${item.zb}%`,
                value: item.zb,
              },
              {
                value: item.other,
              },
            ],
            label: {
              show: true,
              position: "center",
              fontSize: 30,
              fontWeight: "bold",
            },
          };
        });
        //下一次加载DOM 结构的时候，再触发初始化，调用可视化视图以及屏幕响应
        this.$nextTick(() => {
          this.initEchart();
          //页面一加载调用调用响应式函数当用户去改变size大小 ，再监听自动响应
          this.screen();
        });
      });
    },
    initEchart() {
      let myChart = this.$echarts.init(this.$refs.con);
      this.chart = myChart;
      let options = {
        title: {
          text: "主要地区农作物种植区域占比",
          left:'5%',
          top:'5%'
        },
        series: this.seriesData,
      };
      myChart.setOption(options);
    },
  },
};
</script>
